<template>
    <div class="details-wrap">
    	<!--提示-->
    	<!-- 客户信息 -->
    	<div class="customer-info">
      		<!-- header -->
      		<div class="title">
				<div class="fl">
					<span></span>
					<span></span>
				</div>
        		<p>客户信息</p>
      		</div>
      		<div class="content">
				<van-field
				v-model="carInfo.carNum"
				label="号牌号码"
				input-align="right"
				placeholder="请输入您的号牌号码"
				maxlength="10"
				v-bind:class="{errorColor:iserror}"
				@click="carNumInput"
				readonly 
				/>
                <van-field
                v-if="typeTrailerBusiness ==2 "
				v-model="carInfo.carNumberPlateumber"
				label="车头号码"
				input-align="right"
				placeholder="请输入您的车头号牌号码"
				maxlength="10"
				v-bind:class="{errorColor:iserror}"
				@click="carNumberPlateumberInput"
				readonly 
				/>
				<van-field
				v-model="carInfo.username"
				label="办理人"
				input-align="right"
				placeholder="请输入办理人(代办人)的姓名"
				maxlength="4"
				/>

				<van-field
				v-model="carInfo.mobile"
				type="tel"
				input-align="right"
				placeholder="请输入您的手机号"
				label="手机号码"
				/>

				<van-field
				v-model="carInfo.code"
				label-align="right"
				input-align="right"
				type="number"
				clearable
				placeholder="请输入4位短信验证码"
				class="card-cell-validation"
				maxlength="4"
				>
          			<span class="fl" slot="label">验证码</span>

					<van-button
						slot="label"
						size="small"
						color="#ea4d18"
						type="primary"
						class="validation"
						@click="sendVerifyCode"
					>
						<Countdown ref="Countdown" class="times"></Countdown>
					</van-button>
        		</van-field>
				<van-field
                v-if="typeTrailerBusiness ==1"
				v-model="carInfo.carMileage"
				@input="inputCarMileage"
				label="行驶里程"
				input-align="right"
				placeholder="请输入行驶里程"
				maxlength="6"
				class="items"
				type="number"
				/>
				<van-field
                v-if="typeTrailerBusiness ==1"
				v-model="carInfo.carOut"
				@click="carOutShowClick"
				readonly
				label="汽车排量"
				input-align="right"
				placeholder="请选择汽车排量"
				maxlength="4"
				class="items"
				/>
        		<!-- 弹出框 选择排量 -->
				<van-popup v-model="carOutShow" position="bottom" :style="{ height: '40%' }">
					<van-picker
						show-toolbar
						title="选择排量"
						visible-item-count='5'
						:columns="carOutaArr"
						@cancel="carOutShow = false"
						@confirm="onConfirm"
						@change='onchange'
						column-class = 'font'
					></van-picker>
					<span class='sum'>{{car_out}}</span>
				</van-popup>
      		</div>
    	</div>
    	<!-- 车辆信息 -->
    	<div class="customer-info bg-fff">
      		<!-- header -->
      		<div class="title">
				<div class="fl">
					<span></span>
					<span></span>
				</div>
        		<p>车辆信息</p>
      		</div>
      		<div class="content">
        		<div class="special color">
          			<p class="t-name">车身颜色<span style="font-size:0.4rem">(请选择与您车身颜色接近的颜色)</span></p>
          			<van-radio-group v-model="carInfo.carColor" direction="horizontal" class="radioFlex">
						<van-radio
						shape="square"
						checked-color="#ea4d18"
						icon-size="16px"
						:name="val.value"
						v-for="val in carColorArr"
						:key="val.name"
						>
							<span style="font-size:16px">{{ val.name }}</span>
						</van-radio>
          			</van-radio-group>
        		</div>
        		<div v-if="typeTrailerBusiness ==1" class="special drive-form">
          			<p class="t-name">驱动形式</p>
					<van-radio-group v-model="carInfo.carDriveType" direction="horizontal">
						<van-radio
						shape="square"
						checked-color="#ea4d18"
						icon-size="16px"
						:name="val.value"
						v-for="val in carDriverArr"
						:key="val.name"
						>
							<span style="font-size:16px">{{ val.name }}</span>
						</van-radio>
					</van-radio-group>
        		</div>
        		<div v-if="typeTrailerBusiness ==1" class="special drive-form">
          			<p class="t-name">变速箱类型</p>
          			<van-radio-group v-model="carInfo.carAtType" direction="horizontal">
						<van-radio
						shape="square"
						checked-color="#ea4d18"
						icon-size="16px"
						:name="val.value"
						v-for="val in carAtTypeArr"
						:key="val.name"
						>
							<span style="font-size:16px">{{ val.name }}</span>
						</van-radio>
					</van-radio-group>
        		</div>
				<div v-if="typeTrailerBusiness ==1" class="special fuel">
					<p class="t-name">燃油类型</p>
					<van-radio-group v-model="carInfo.carFuel" direction="horizontal">
						<van-radio
						shape="square"
						checked-color="#ea4d18"
						icon-size="16px"
						:name="val.value"
						v-for="val in carFuelArr"
						:key="val.name"
						><span style="font-size:16px">{{ val.name }}</span></van-radio>
					</van-radio-group>
				</div>
				<div v-if="typeTrailerBusiness ==1" class="special fuel">
					<p class="t-name">转向轴专项形式</p>
					<van-radio-group v-model="carInfo.steeringShaftSorm" direction="horizontal">
						<van-radio
						shape="square"
						checked-color="#ea4d18"
						icon-size="16px"
						:name="val.value"
						v-for="val in steeringShaftSormArr"
						:key="val.name"
						><span style="font-size:16px">{{ val.name }}</span></van-radio>
					</van-radio-group>
				</div>
                <div class="special fuel">
					<p class="t-name">挂车轴数目</p>
					<van-radio-group v-model="carInfo.numberTrailerAxles" direction="horizontal">
						<van-radio
						shape="square"
						checked-color="#ea4d18"
						icon-size="16px"
						:name="val.name"
						v-for="val in numberTrailerAxlesArr"
						:key="val.name"
						><span style="font-size:16px">{{ val.name }}</span></van-radio>
					</van-radio-group>
				</div>
      		</div>
    	</div>
    	<!-- 行驶证信息 -->
    	<div class="drivers-license bg-fff">
      		<!-- header -->
			<div class="title">
				<div class="fl">
					<span></span>
					<span></span>
				</div>
				<p>行驶证信息</p>
			</div>
      		<div class="uploader" @click="upCarImgFront">
        		<div class="box boxz">
          			<uploadImg class="uploadImg" :upData='upData' @upload="picurl"/>
          			<div class="icon">
            			<div class="bg" v-show="carInfo.carImgFront === ''"></div>
          			</div>
					<div class="bottom" v-if="carInfo.carImgFront === ''">
						<span>拍照上传行驶证主页</span>
						<span>上传后自动识别内容</span>
					</div>
					<div class="text bg-fff" v-else>
						<img :src="carInfo.carImgFront" class="img-contain" />
					</div>
        		</div>
      		</div>
      		<p class="tips">上传行驶证主页照片</p>
			<div class="uploader" @click="upCarImgBack">
        		<div class="box boxf">
          			<uploadImg class="uploadImg" :upData='upData' @upload="picurl"/>
          			<div class="icon">
            			<div class="bg" v-show="carInfo.carImgFront === ''"></div>
          			</div>
					<div class="bottom" v-if="carInfo.carImgFront === ''">
						<span>拍照上传行驶证主页</span>
						<span>上传后自动识别内容</span>
					</div>
					<div class="text bg-fff" v-else>
						<img :src="carInfo.carImgBack" class="img-contain" />
					</div>
        		</div>
      		</div>
      		
      		<p class="tips">上传行驶证副页照片</p>
    	</div>
        <div class="details-wrap">
            <div class="title">
				<div class="fl">
					<span></span>
					<span></span>
				</div>
				<p>车身侧面照<span @click="showInsurance">(查看车身侧面照片实例)</span></p>
			</div>
            <div class="insurance">
                <div class="uploader" @click="upImgPolicy">
                    <div class="insurance_box">
                        <uploadImg class="uploadImg" :upData='upData' @upload="picurl"/>
                        <div class="icon" v-if="!carInfo.bodySideView"></div>
                        <div class="text bg-fff" v-else>
                            <img :src="carInfo.bodySideView" class="img-contain" />
                        </div>
                    </div>
                </div>
				<p class="tips">点击上传车身侧面照</p>
            </div>
			
        </div>
		
    	<!-- 服务协议 -->
    	<div class="agreement-info">
			<van-checkbox v-model="agreementChecked" shape="square" checked-color="#ea4d18" class="fl">
				<span>我已阅读并同意</span>
			</van-checkbox>
      		<!-- <span class="color fl" @click="vehicleDetailsShow = true">《服务协议》</span> -->
      		<span class="color fl" @click="vehicleClick">《服务协议》</span>
    	</div>
    	<van-button type="primary" color="#27b5a7" class="btn-submit" block @click="addCars">提交</van-button>

		<van-dialog v-model="input_show" :before-close='close_dialog' title="提示">
			<van-field
			v-model="carInfo.carPeople"
			label="所有人姓名："
			input-align="right"
			placeholder="请输入车辆所有人姓名"
			maxlength="20"
			/>
		</van-dialog>
    	<!-- 车辆号牌弹出 -->
		<van-popup v-model="showInputCarNumber" position="bottom">
			<plateNumber @getPlateLicense="getPlateLicense"></plateNumber>
		</van-popup>
		<!-- 车辆号牌弹出 -->
		<van-popup v-model="showberPlateumberInput" position="bottom">
			<plateNumber @getPlateLicense="cargetPlateLicense"></plateNumber>
		</van-popup>
        <!--保险照片实例弹出-->
        <van-dialog v-model="insurance" title="侧面照实例" confirmButtonText="返回">
            <div class="wrapper">
                <img src="@/assets/img/u281.png" alt="">
            </div>
        </van-dialog>
        <!-- 弹出业务类型选择框 -->
        <van-popup v-model="business" :close-on-click-overlay="false">
            <div class="business">
                <h3>办理业务类型</h3>
                <p>(请选择需要办理挂车的业务类型)</p>
                <div class="btn" @click="clickBtn('检测车头')">检测车头</div>
                <div class="btn" @click="clickBtn('检测车尾')">检测车尾</div>
            </div>
        </van-popup>
    	<foot :navUrl="url"/>
  	</div>
</template>
<script>
	import UpFile from '@/components/upFile/index'
	import Countdown from '@/components/countdown/index'//发送短信组件
	import { getLocal,setLocal } from '@/utils/storage'
	import foot from '@/views/footer.vue'
	import plateNumber from '@/components/plateNumber/index'//输入车牌号码组件

	import uploadImg from '@/components/upFile/uploadimg'//大文件上传组件
	import crypto from "crypto";
	export default {
  		name: 'truck',
  		data() {
		return {
            insurance:false,
			showInputCarNumber:false,
			showberPlateumberInput:false,
			editState: false,
			car_out:'',
			upData:null,
            input_show:false,
            business:true,//业务类型选择框
            typeTrailerBusiness:null,//业务类型
			carInfo: {
				userId: null,
                carNum: null, // 号牌号码
                carNumberPlateumber:null,//车头号码
				username:null,//客户姓名
				mobile:null,//手机号码
				code:null,//验证码
				carColor: null, // 车身颜色
				carDriveType: null, // 驱动形式
				carAtType: null, // 变速箱类型 !
				carFuel: null, // 燃油类型
				carMileage:null,//行驶里程
				carOut: '', // 汽车排量
				carImgFront: null, // 行驶证正面
				carImgBack: null, // 行驶证反面
				carAttachment2: null, // 备用项2 行驶证主页
				carAttachment3: null, // 备用项3 行驶证副页
				carType: null, // 车辆类型
				carSize: null, // 外廓尺寸
				carPeople: null, // 所有人
				verifySecondaryPage:1,//判定是否需上传副页
				carRegNum:null,//注册时间
				carUse:null,//使用性质
				carDriveNum: null, // 发动机号码  
				carIdNum: null, // 车辆识别代号  
				carBrandNum:null,//品牌型号
				carBeginDate:null,//发证日期
				carAddress:null,//地址
				carTotalWeight:null,//总质量
				carLoadPeople:null,//核定载人数
				carWeight:null,//整备质量
				carTowWeight:null,//准牵引总质量
				carRecordNum:null,//  档案编号
				carLoadApproved:null,//  核定载质量
                carCheckLog:null,//  检验记录
                steeringShaftSorm:null,//转向轴形式
                numberTrailerAxles:null,//挂车轴数目
				bodySideView:null,//侧面照
				typeTrailerBusiness:null,//业务类型
			},
			carInfoDisabled: {
				carNum: false
			},
			drawingInfo: {
				lineWidth: 6,
				lineColor: '#000000',
				bgColor: '',
				resultImg: '',
				isCrop: true
			},
			carColorArr: [],//车身颜色集合
			carDriverArr: [],//驱动形式集合
			carFuelArr: [],//燃油类型集合
            carAtTypeArr: [],//变速箱类型集合
            steeringShaftSormArr:[
                {id:1,name:'单转向轴',value:1},
                {id:2,name:'双转向轴',value:2}
            ],//转向轴形式集合
            numberTrailerAxlesArr:[
                {id:1,name:'1轴',value:'1'},
                {id:2,name:'2轴',value:'2'},
                {id:3,name:'3轴',value:'3'},
                {id:4,name:'4轴',value:'4'},
                {id:5,name:'5轴',value:'5'}

            ],//挂车轴数目集合
			carOutShow: false,
			carOutaArr: [
                {values:[]},
                {values:[]},
                {values:[0,1,2,3,4,5,6],defaultIndex: 1},
				{values:['.']},
				{values:[0,1,2,3,4,5,6,7,8,9],defaultIndex: 5},
				{values:[]},
				{values:[]},
				{values:[]},
			],//排量集合
			agreementChecked: false,
			carPlateDialog: false,
			boxshow: true,
			// 服务协议
			vehicleDetailsShow: false,
			//失败次数
			errNum:1,
			iserror:false,//不一致提示
			exceed:true,
			url:'vehicleInfo',
			carNumErrNum:1,
		}
  	},
  	computed: {
		
	},
  	created() {
    	console.log(this.$route, '----  编辑状态进入 车辆详情 --------')
    	console.log(JSON.parse(getLocal('userInfo')), 'carUser')
    
    	let edit = getLocal('edit')
    	if (edit || this.$route.params.name === 'agreement') {
			this.business = false
      		let info = JSON.parse(getLocal('info'))
      		if (this.$route.params.name === 'agreement') {
        		this.editState = this.$route.params.editState
        		info = this.$route.params.carInfo
        		this.agreementChecked = this.$route.params.agreementChecked
      		} else {
        		this.editState = true
      		}
      		this.carInfo = {
				username          : info.username,
				mobile            : info.mobile,//手机号码
				id                : info.id,
				userId            : info.userId,
				carNum            : info.carNum, // 车牌号
				carNumberPlateumber:info.carNumberPlateumber,
				carDriveNum       : info.carDriveNum, // 发动机号码
				carPeople         : info.carPeople, // 所有人
				carIdNum          : info.carIdNum, // 车辆识别代号
				carType           : info.carType, // 车辆类型
				carSize           : info.carSize, // 外廓尺寸
				carFuel           : info.carFuel, // 燃油类型
				carImgFront       : info.carImgFront, // 行驶证正面
				carImgBack        : info.carImgBack, // 行驶证反面
				carAtType         : info.carAtType, // 变速箱类型 !
				carDriveType      : info.carDriveType, // 驱动形式
				carColor          : info.carColor, // 车身颜色
				carOut            : info.carOut, // 排量
				carMileage        : info.carMileage, // 里程
				carAttachment2    : info.carAttachment2, // 备用项2 行驶证主页
				carAttachment3    : info.carAttachment3, // 备用项3 行驶证副页
				code              : null,
				carRegNum         : info.carRegNum,
				carUse            : info.carUse,
				carBrandNum       : info.carBrandNum,
				carBeginDate      : info.carBeginDate,
				carAddress        : info.carAddress,
				carTotalWeight    : info.carTotalWeight,
				carLoadPeople     : info.carLoadPeople,
				carWeight         : info.carWeight,
				carTowWeight      : info.carTowWeight,
				carRecordNum      : info.carRecordNum,
				carLoadApproved   : info.carLoadApproved,
                carCheckLog       : info.carCheckLog,
                steeringShaftSorm : info.steeringShaftSorm,
                numberTrailerAxles: info.numberTrailerAxles,
				bodySideView      : info.bodySideView,
				typeTrailerBusiness: info.typeTrailerBusiness
			}
			this.typeTrailerBusiness = info.typeTrailerBusiness
			if (this.$route.params.name === 'agreement') {
				this.carInfo.code = info.code
				this.carInfo.verifySecondaryPage = info.verifySecondaryPage
			}
    	}
		this.dataDir({
			type: 'carColorType'
		})
		this.dataDir({
			type: 'carDriverType'
		})
		this.dataDir({
			type: 'carFuelType'
		})
		this.dataDir({
			type: 'carAtType'
		})
		this.dataDir({
			type: 'carNumType'
		})
  	},
  	methods: {
        /**
         * 选择业务类型
         */
        clickBtn(e){
            console.log(`点击了----------${e}`)
            if (e === '检测车头') {
                this.typeTrailerBusiness = '1'
            }else{
                this.typeTrailerBusiness = '2'
            }
            this.business = false
        },
        //侧面照照片上传
		upImgPolicy(){
			console.log('点击了交强险照片上传')
			// 固定参数携带
			const times = new Date().getTime();
			const md5 = crypto.createHash("md5");
			md5.update(times + "35e5c1b47ce3");
			let sign = md5.digest("hex")
			let timestamp = times
			this.upData = {
                type: 'bodySideView',
                uploadsType:1,
                carNum:this.carInfo.carNum,
				uploads:this.carNumErrNum,
				userId:JSON.parse(getLocal('userInfo')).id,
				sign:sign,
				timestamp:timestamp
			}
		},
        //显示保单案例
        showInsurance(){
            this.insurance = true
        },
		//禁止里程小数
		inputCarMileage(e){
			console.log('正在输入的里程----------',e)
			if(!/^\d+$/.test(e)){
				this.$toast('请输入整数')
               	this.carInfo.carMileage = null;
            }
		},
		//提示
		close_dialog(action, done){
			if (!this.carInfo.carPeople && this.input_show) {
				this.$toast('请输入车辆所有人')
				done(false)
			}else{
				done()
			}
		},
    	//接收子行驶证识别子组件信息
    	picurl(val){
        	console.log('-------------行驶证识别-------------------',val)
        	let obj = val.data
      		if (val.status == 200 && obj) {
				this.errNum = 0
				this.$toast.clear()
        		if (val.str === 'front') {
					this.carInfo.verifySecondaryPage  = obj.carInfo.verifySecondaryPage
					this.carInfo.carImgFront          = obj.urlData
					this.carInfo.carPeople            = obj.carInfo.carPeople
					this.carInfo.carType              = obj.carInfo.carType
					this.carInfo.carRegNum            = obj.carInfo.carRegNum
					this.carInfo.carUse               = obj.carInfo.carUse
					this.carInfo.carIdNum             = obj.carInfo.carIdNum
					this.carInfo.carDriveNum          = obj.carInfo.carDriveNum
					this.carInfo.carBrandNum          = obj.carInfo.carBrandNum
					this.carInfo.carBeginDate         = obj.carInfo.carBeginDate
					this.carInfo.carAddress           = obj.carInfo.carAddress
					if (!this.carInfo.carPeople) {
						this.input_show = true
					}
					
          			this.iserror = false
         			 
                }else if(val.str === 'back') {
					
					if (!obj.carInfo.carNum.includes(this.carInfo.carNum) && obj.verifySecondaryPage === 1) {
						this.$toast('副页信息识别不一致！')
						return
					}
					this.carInfo.carTotalWeight  = obj.carInfo.carTotalWeight
					this.carInfo.carSize         = obj.carInfo.carSize
					this.carInfo.carImgBack      = obj.urlData
					this.carInfo.carLoadPeople   = obj.carInfo.carLoadPeople
					this.carInfo.carWeight       = obj.carInfo.carWeight
					this.carInfo.carTowWeight    = obj.carInfo.carTowWeight
					this.carInfo.carRecordNum    = obj.carInfo.carRecordNum
					this.carInfo.carLoadApproved = obj.carInfo.carLoadApproved
					this.carInfo.carCheckLog     = obj.carInfo.carCheckLog 
        		}else{
                    this.carInfo.bodySideView = obj.urlData
                }
        		this.$toast('上传成功！')
      		} else {
				this.$toast.clear()
				this.errNum++
				if (this.errNum>5) {
					this.exceed = false
					
					this.boxshow = true
				}
        		if (val.status == 320) {
					this.$toast({
						duration: 4000,
						message:'您上传的行驶号牌与您输入的号牌号码不一致，请仔细核对'
					})
            		this.iserror = true
					console.log('this.carNumErrNum------------',this.carNumErrNum)
					this.carNumErrNum = this.carNumErrNum+1
					console.log('this.carNumErrNum------------',this.carNumErrNum)
				}else{
					this.$toast({
						duration:4000,
						message:val.message
					})
				}
     	 	}
		},
		//主页分片上传
		upCarImgFront(){
			console.log('点击了主页上传')
			// 固定参数携带
			const times = new Date().getTime();
			const md5 = crypto.createHash("md5");
			md5.update(times + "35e5c1b47ce3");
			let sign = md5.digest("hex")
			let timestamp = times
			this.upData = {
				type: 'front',
				carNum:this.carInfo.carNum,
				uploads:this.carNumErrNum,
				userId:JSON.parse(getLocal('userInfo')).id,
				typeTrailerBusiness:this.typeTrailerBusiness,
				sign:sign,
				timestamp:timestamp
				
			}
		},
		//副页分片上传
		upCarImgBack(){
			console.log('点击了副页上传')
			// 固定参数携带
			const times = new Date().getTime();
			const md5 = crypto.createHash("md5");
			md5.update(times + "35e5c1b47ce3");
			let sign = md5.digest("hex")
			let timestamp = times
			this.upData = {
				type: 'back',
				carNum:this.carInfo.carNum,
				uploads:this.carNumErrNum,
				userId:JSON.parse(getLocal('userInfo')).id,
				verifySecondaryPage:this.carInfo.verifySecondaryPage,
				typeTrailerBusiness:this.typeTrailerBusiness,
				sign:sign,
				timestamp:timestamp
			}
		},
		//车牌组件
		getPlateLicense(data){
			console.log('组件传出的data',data)
			this.carInfo.carNum = data
			this.showInputCarNumber = false
		},
		//车头
		cargetPlateLicense(data){
			console.log('组件传出的data',data)
			this.carInfo.carNumberPlateumber = data
			this.showberPlateumberInput = false
		},
		//打开输入车牌
		carNumInput(){
			this.showInputCarNumber = true
		},
		//打开输入车头
		carNumberPlateumberInput(){
			this.showberPlateumberInput = true
		},
    	// 添加车辆信息  提交
    	async addCars() {
			console.log(this.carInfo,this.agreementChecked,'------------- this.carInfo-----------')
      		let res = null
			if (this.validationFn()) {
				return
			} else {
				if(!this.exceed){
					this.carInfo.whetherHide = 0
				}else{
					this.carInfo.whetherHide = 1
				}
        		if (this.editState) {
                    
          			res = await this.$api.updateCars(this.carInfo)
          			console.log(res, '------------------- 修改车辆信息 ----------------')
        		} else {
					this.carInfo.typeTrailerBusiness = this.typeTrailerBusiness
          			res = await this.$api.addCars(this.carInfo)
          			console.log(res, '------------------- 添加车辆信息 ----------------')
        		}
        		if (res && res.status === 200) {
					this.$toast('提交成功！')
					let edit = getLocal('edit')
					if (edit) {
						setTimeout(() => {
							//this.$router.push('/vehicleInfo')
							this.$router.push({
								name: 'vehicleInfo',
							})
						}, 1000)
          			}else{
            			// 到场预约
              			this.createOrder(res.data)
          			}
				} else {
					
					console.log('res.message------------',res)
				}
      		}
    	},
    	// 提交预约
    	async createOrder(items,str) {
			let params = {
				stationId: 1,
				carId: items.id,
				userId: items.userId,
				userSign: items.carAttachment1,
				type:3
			}
			if (this.carInfo.typeTrailerBusiness ==2) {
				params.orderType = 6
			}
      		let res = await this.$api.createOrder(params)
      		if (res.status === 200) {
				this.$router.push({
					name: 'orderPay',
					params: {
						carInfo: res.data
					}
				})
      		}
    	},
		//选择
		onchange(picker, value, index){
			console.log('value, index', value, index)
			this.car_out = value[2]+'.'+value[4]
		},
    	// 获取车辆数据字典
    	async dataDir(params) {
			let res = await this.$api.dataDir(params)
			console.log(res, '------------------- 获取车辆数据字典 ----------------')

      		if (res.status === 200 && res.data) {
				if (params.type === 'carColorType') {
					this.carColorArr = res.data.list
				}
				if (params.type === 'carDriverType') {
					this.carDriverArr = res.data.list
				}
				if (params.type === 'carFuelType') {
					this.carFuelArr = res.data.list
				}
				if (params.type === 'carAtType') {
					this.carAtTypeArr = res.data.list
				}
				
      		}
    	},
    	// 发送短信验证码
    	async sendVerifyCode() {
			let res = await this.$api.sendVerifyCode({
				phone: this.carInfo.mobile
			})
			if (res.status === 200) {
				this.$refs.Countdown.countDown(true, 60)
			}
      		console.log(res, '------------------- 发送短信验证码 ----------------')
    	},

    	// 服务协议 点击跳转页面
		vehicleClick() {
			this.$router.push({
				name: 'agreement',
				params: {
					carInfo: this.carInfo,
                    editState: this.editState,
                    type:'truck',
					agreementChecked:this.agreementChecked
				}
			})
		},
    	//打开排量选择器
		carOutShowClick(){
			this.carOutShow = true
			if (!this.car_out) {
				this.car_out = '1.5'
			}
		
		},
    	// 排量确定
		onConfirm(value, index) {
			//this.carInfo.carOut = value.value
			this.carOutShow = false
			this.carInfo.carOut = this.car_out
		},
		// 完成车牌输入 回调
		complete(presetNumber) {
			console.log(presetNumber, '完成车牌输入')
			this.carInfo.carNum = presetNumber.substring(1)
			this.carPlateText = presetNumber.substring(0, 1)
			this.carPlateDialog = false
		},

		
    	// -------------------------------------提交验证---------------------------------
    	validationFn() {

			let c = this.carInfo
			console.log(c, '----验证---')
			let s = '信息不正确！'
      
			if (this.carInfo.carNum==='' || this.carInfo.carNum === null) {
				this.$toast('号牌号码' + s)
				return true
            }
            if(!c.carNumberPlateumber && this.typeTrailerBusiness ==2){
                this.$toast('车头号牌号码' + s)
				return true
            }
			if (this.carInfo.username === '' || this.carInfo.username === null) {
				this.$toast('姓名' + s)
				return true
			}
			if (this.carInfo.code === '' || this.carInfo.code === null) {
				this.$toast('验证码' + s)
				return true
			}
			if (!this.carInfo.userId || this.carInfo.userId === '') {
				this.carInfo.userId = JSON.parse(getLocal('userInfo')).id
			}
			if ((!c.carImgFront || c.carImgFront === '') && this.exceed) {
				this.$toast('请上传行驶证正面照片')
				return true
			}

			if ((!c.carImgBack || c.carImgBack === '') && this.exceed) {
				this.$toast('请上传行驶证反面照片')
				return true
			}
			if (!c.carColor || c.carColor === '') {
				this.$toast('车身颜色' + s)
				return true
			}

			if ((!c.carDriveType || c.carDriveType === '') && this.typeTrailerBusiness ==1) {
				this.$toast('驱动形式' + s)
				return true
			}

			if ((!c.carAtType || c.carAtType === '') && this.typeTrailerBusiness ==1) {
				this.$toast('变速箱类型' + s)
				return true
			}
			if ((!c.carFuel || c.carFuel === '') && this.typeTrailerBusiness ==1) {
				this.$toast('燃油类型' + s)
				return true
            }
            if (!c.steeringShaftSorm && this.typeTrailerBusiness ==1) {
                this.$toast('转向轴' + s)
				return true
            }
            if (!c.numberTrailerAxles) {
                
                this.$toast('挂车轴数' + s)
				return true
            }
			if (!this.agreementChecked) {
				this.$toast('请阅读并同意《服务协议》')
				return true
			}
			
            if (!c.bodySideView) {
                this.$toast('车辆侧面照' + s)
                return true
            }
			if ((!c.carPeople || c.carPeople === '') && this.exceed) {
                this.$toast('车辆所有人' + s)
                if (!this.carInfo.carPeople) {
					this.input_show = true
				}
				return true
			}

			if ((!c.carOut || c.carOut === '') && this.typeTrailerBusiness ==1) {
				this.$toast('车辆排量' + s)
				return true
			}

			if ((!c.carMileage || c.carMileage === '') && this.typeTrailerBusiness ==1) {
				this.$toast('车辆里程' + s)
				return true
			}
      
    	}
  	},
	components: {
		Countdown,
		UpFile,
		foot,
		plateNumber,
		uploadImg
	}
}
</script>
<style lang="less" scoped>
.ipnt_show_error{
  font-size: 0.3rem;
  color:red;
  text-align: center;
  line-height: 0.6rem;
}
.sum{
  position: absolute;
  right: 1.5rem;
  top:calc(44px * 3.5);
  z-index: 999;
  line-height: 44px;
  font-size: 0.6rem;
  transform: translateY(-50%);
}
.errorColor{
  color:red;
  border-bottom: 1px solid red!important;
}
//提示
.prompt{
  font-size: 0.35rem;
  text-align: center;
  color:red;
  position: fixed;
  left: 0;
  top:0;
  width: 100%;
  z-index: 999;
  background-color: #efefef;
  line-height: 1rem;
  ;
}
#canvasBox {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: #fff;
  canvas {
    width: 100%;
    height: 100%;
  }
  .botton-box {
    width: 6%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    i {
      position: absolute;
      left: 20%;
    }
    .van-icon-success {
      top: 3%;
      transform: rotate(-90deg);
    }
    .van-icon-delete {
      top: 45%;
      transform: rotate(-90deg);
    }
    .van-icon-cross {
      bottom: 3%;
    }
  }
}
.details-wrap {
  background-color: #f0f0f0;
  padding-bottom: 0.48rem;
  // 最小字体
  .small-font {
    font-size: 0.16rem;
    transform: scale(0.83, 0.83);
    -webkit-text-size-adjust: 100%;
  }
  .title {
    height: 1.12rem;
    background-color: #f0f0f0;
    div {
      margin: 0.333rem 0 0 0.2rem;
      span {
        width: 0.133rem;
        height: 0.533rem;
        background-color: #fff;
        display: inline-block;
      }
      span:nth-of-type(2) {
        background-color: #009a44;
      }
    }
    p {
        font-size: 0.587rem;
        color: #000;
        height: inherit;
        line-height: 1.22rem;
        text-indent: 0.227rem;
        i{
            font-size: 0.35rem;
        }
        span{
            color: red;
            font-size: 0.4rem;
            line-height: 0.8rem;
            display: inline-block;
        }
    }
  }
  /deep/ .van-uploader,
  /deep/ .van-uploader .van-uploader__wrapper,
  /deep/ .van-uploader .van-uploader__input-wrapper {
    width: 100%;
  }
  // 客户信息
  .customer-info {
    .van-cell {
      border-bottom: 1px solid #bbb;
    }

    .content {
      .van-cell {
        height: 1.147rem;
        line-height: 1.147rem;
        padding: 0 16px;
        /deep/ .van-field__control {
          height: 1.147rem;
          line-height: 1.147rem;
        }
        /deep/ .van-cell__title {
          span {
            font-size: 0.48rem;
          }
        }
      }
      // 号牌号码
      .card-cell {
        /deep/ .van-cell__title {
          width: 78%;
        }
        .card {
          min-width: 32px;
          height: 0.827rem;
          margin-top: 0.16rem;
          span {
            height: 0.827rem;
            line-height: 0.827rem;
            position: absolute;
            vertical-align: middle;
            font-size: 14px;
            left: 0;
            top: 0;
            min-width: auto;
          }
          i {
            min-width: auto;
            height: 0.827rem;
            position: absolute;
            right: 0.16rem;
            top: 0;
            transform: rotate(90deg);
          }
        }
      }
      // 验证码
      .card-cell-validation {
        /deep/ .van-cell__title {
          width: 52%;
          position: relative;
          display: flex;
        }
        .validation {
          
          margin-left: 0.2rem;
          height: 0.667rem;
          line-height: 0.667rem;
          vertical-align: middle;
          padding: 0 4px;
          min-width: auto;
          border-radius: 0.107rem;
          border: 0;
          margin-top: 0.2rem;
          /deep/ .times {
            // .small-font;
            font-size: 0.32rem;
          }
        }
      }
    }
  }
  // 驾驶证信息
  .drivers-license {
    padding-bottom: 0.32rem;
    .tips{
      font-size: 0.6rem;
      font-weight: 600;
      text-align: center;
      margin: 0.3rem 0;
    }
    
    div.uploader {
      width: 6.267rem;
      height: 4.053rem;
      margin: 0.187rem auto 0;
      border-radius: 0.16rem;
      border: 0.027rem dashed #949494;
      .uploadImg{
        width: 6rem;
        height: 3.76rem;
        position: absolute;
        left: 0;
        top:0;
        z-index: 2;
      }
      .box {
        width: 6rem;
        height: 3.76rem;
        margin: 0.133rem;
        position: relative;
        background-size: cover;
        .text {
          display: table-cell;
          height: inherit;
          vertical-align: middle;
          img {
            width: 100%;
            max-width: 100%;
            max-height: 100%;
            display: block;
            margin: auto;
          }
        }
        .icon {
          width: 100%;
          height: inherit;
          position: absolute;
          top: 0;
          left: 0;
          .bg {
            width: 1.493rem;
            height: 1.493rem;
            border-radius: 50%;
            background: url('../../assets/img/icon/camera.png') center center
              no-repeat #ea4d18;
            background-size: 60%;
            margin: 0.56rem auto 0;
          }
        }
        .bottom {
          width: 100%;
          height: 1.693rem;
          position: absolute;
          bottom: 0;
          left: 0;
          span {
            display: block;
            text-align: center;
            font-size: 0.307rem;
          }
          span:nth-of-type(1) {
            font-size: 0.4rem;
            font-weight: 500;
            margin: 0.24rem 0 0.267rem;
          }
        }
      }
      
    }
  }
  .boxz{
        background: url('../../assets/img/zbg.png') no-repeat;
      }
      .boxf{
        background: url('../../assets/img/fbg.png') no-repeat;
      }
  // 车辆信息
  .customer-info {
    .content {
      .special {
        padding: 0.187rem 0.333rem;
        border-bottom: 1px solid #cacaca;
        .t-name {
          font-size: 0.493rem;
          line-height: 0.72rem;
          margin-bottom: 0.24rem;
        }
      }
      .color {
        .van-radio-group{
          display: flex;
          flex-wrap: wrap;
        }
        .van-radio {
          margin-right: 1.067rem;
          margin-bottom: 0.3rem;
        }
       
      }
      .drive-form {
        .van-radio {
          margin-right: 1.36rem;
          margin-bottom: 0.3rem;
        }
        
      }
      .fuel {
        .van-radio {
          margin-right: 1.001rem;
          margin-bottom: 0.3rem;
        }
        .van-radio:last-child{
          margin-right: 0;
        }
        
      }
      
    }
  }
  // 电子签名
  .signature-info {
    .content {
      padding: 0.24rem 0 0.267rem;
      .uploader {
        width: 6.32rem;
        height: 4.08rem;
        margin: 0.187rem auto 0;
        border-radius: 0.16rem;
        border: 2px dashed #a7a7a7;
        position: relative;
        .bg,
        .text {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }
        .bg {
          opacity: 0.1;
          img {
            width: 5.333rem;
            height: 3.68rem;
            margin: 0.16rem auto 0;
            display: block;
          }
        }
        .text {
          z-index: 1;
          p {
            font-size: 1.093rem;
            text-align: center;
            color: #757172;
            margin: 0.893rem 0 0.72rem;
          }
          p:nth-of-type(2) {
            font-size: 0.48rem;
            color: #747072;
            margin: 0;
          }
          img {
            width: 100%;
            height: inherit;
            // transform: rotate(90deg);
          }
        }
      }
    }
  }
  
  // 服务协议
  .agreement-info {
    margin: 0.267rem 0 0 0.253rem;
    span {
      font-size: 0.48rem;
    }
    .color {
      color: #f60b16;
    }
  }

  .btn-submit {
    width: 95%;
    font-size: 0.64rem;
    letter-spacing: 1.093rem;
    border-radius: 0.16rem;
    margin: 20% auto 0;
    span {
      margin-left: 15%;
    }
  }
  
    ::-webkit-input-placeholder { /* WebKit, Blink, Edge */
        color: red;

    }
    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: red;

    }
    ::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: red;

    }
    :-ms-input-placeholder { /* Internet Explorer 10-11 */
        color: red;

    }
    /**
    侧面照案例 
    */
    .wrapper{
        text-align: center;
        img{
            max-width: 90%;
            max-height: 60vh;
        }
    }
    .insurance{
        background-color: #fff;
        padding: 0.3rem 0;
        .uploader{
            width: 90%;
            height: 5rem;
            margin: 0.187rem auto 0;
            border-radius: 0.16rem;
            
            position: relative;
            .uploadimg {
                width: 90%;
                height: 5rem;
                position: absolute;
                left: 5%;
                top: 0;
                z-index: 2;
            }
            .insurance_box{
                width: 100%;
                height: 100%;
                
                .icon{
                    width: 80%;
                    height: 80%;
					background: url('../../assets/img/cmz.png') center/cover no-repeat;
					opacity: 0.5;
					margin: 0 auto;
				}
				.icon::after{
						content: '';
						background: url('../../assets/img/pho.png') center/cover no-repeat;
						width: 2rem;
						height: 2rem;
						position:absolute;
						left: calc(50% - 1rem);
						top: calc(50% - 1rem);
					}
                .text{
                    width: 100%;
                    height: 100%;
                    text-align: center;
                }
            }
		}
		.tips{
			font-size: 0.4rem;
			text-align: center;
			line-height: 0.8rem;
			font-weight: 800;
		}
    }
    /**检测业务选择 */
    .business{
        width: 90vw;
        padding: 0.3rem 0 1rem 0;
        text-align: center;
        h3{
            font-size: .6rem;
            line-height: 1rem;
        }
        p{
            font-size: 0.4rem;
            line-height: 0.6rem;
        }
        .btn{
            width: 4rem;
            height: 1rem;
            line-height: 1rem;
            margin: 0.8rem auto;
            border: 1px solid #333;
            
        }
    }
  
}

</style>
